import React, { useEffect, useState } from 'react'
import { Table, Tag, Button, message, Modal } from 'antd';
import { useNavigate, useLocation, useSearchParams, useParams } from 'react-router-dom';
import ums from '../apis/ums'
import moment from 'moment/moment'
import ButtonAuth, { authModes } from './auth/components/buttonAuth';
import { useSelector, useDispatch } from 'react-redux'
import * as accountM from '../store/modules/account'
export default function UserList() {
    const account = useSelector((state) => {
        console.log(state, 'state');
        return state.account
    })
    const data = account.data
    const total = account.total
    const loading = account.loading
    // console.log(data);
    const dispatch = useDispatch()
    const useSearch = useSearchParams()
    const useParamss = useParams()
    const [userid, setuserid] = useState('');
    function del(e) {
        setuserid(e._id)
        setOpen(true)
    }
    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [modalText, setModalText] = useState('是否永久删除');
    const handleOk = () => {
        setOpen(false);
        dispatch(accountM.del({ _id: userid }))
    };
    const handleCancel = () => {
        setOpen(false);
    };
    const columns = [
        {
            title: '账户名',
            dataIndex: 'account',
            key: 'account',
        },
        {
            title: '角色',
            dataIndex: 'userGroup',
            key: 'userGroup',
        },
        {
            title: '创建时间',
            dataIndex: 'createDate',
            render: (date) => {
                return moment(date).format("YYYY-MM-DD HH:mm:ss")
            }
        },
        {
            title: '操作',
            key: '_id',
            render: (text, record, _id) => (
                <ButtonAuth auth={"del_account"} authMode={authModes.openOrDisabled}>
                    <Button type='primary' danger onClick={() => del(record)}>删除</Button>
                </ButtonAuth>
            ),
        },
    ];
    const navigate = useNavigate();
    function addUser() {
        navigate('/NavPage/addUser')
    }
    function renders(params) {
        dispatch(accountM.getData({ pageSize: 10, pageNumber: 1 }))
    }
    React.useEffect(() => {
        renders()
    }, [])
    function onChange(pageNumber, pageSize) {
        console.log(pageNumber, pageSize)
        dispatch(accountM.getData({ pageNumber, pageSize }))
    }
    return (
        <div>
            <ButtonAuth auth={"add_account"} authMode={authModes.openOrDisabled}><Button type='primary' onClick={addUser} >增加用户</Button></ButtonAuth>
            {/* <Button  type='primary' onClick={addUser} >增加用户</Button> */}
            <Table loading={loading} rowKey="_id"
                pagination={{
                    total,
                    onChange
                }} columns={columns} dataSource={data} />
            <Modal
                title="Title"
                open={open}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <p>{modalText}</p>
            </Modal>
        </div>
    )
}
